<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_计算器练习</title>
</head>
<body>
<input type="number" id="n1" placeholder="请输入数字1"><br>
<input type="number" id="n2" placeholder="请输入数字2"><br>
<button onclick="f1()">加</button>
<button onclick="f2()">减</button>
<button onclick="f3()">乘</button>
<button onclick="f4()">除</button>
<br>
<h4>运算结果:<span id="jg"></span></h4>


<script>
    function f1(){
        let num1 = document.querySelector('#n1').value;
        let num2 = document.querySelector('#n2').value;
        num1 = parseFloat(num1);
        num2 = parseFloat(num2);
        let num=num1+num2;
        let spanE = document.getElementById('jg');
        spanE.innerHTML=num;
    }
    function f2(){
        let num1 = document.querySelector('#n1').value;
        let num2 = document.querySelector('#n2').value;
        num1 = parseFloat(num1);
        num2=parseFloat(num2);
        let num=num1-num2;
        let spanE = document.getElementById('jg');
        spanE.innerHTML=num;

    }
    function f3(){
        let num1 = document.querySelector('#n1').value;
        let num2 = document.querySelector('#n2').value;
        num1 = parseFloat(num1);
        num2=parseFloat(num2);
        let num=num1*num2;
        let spanE = document.getElementById('jg');
        spanE.innerHTML=num;

    }
    function f4(){
        let num1 = document.querySelector('#n1').value;
        let num2 = document.querySelector('#n2').value;
        num1 = parseFloat(num1);
        num2=parseFloat(num2);
        let num=num1/num2;
        let spanE = document.getElementById('jg');
        spanE.innerHTML=num;

    }


</script>
</body>
</html>